<template>
  <div class="screenfull">
    <svg-icon
        :icon-class = "isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
        @click = "handleClick"
    />
  </div>
</template>

<script lang = "ts">
import { defineComponent, getCurrentInstance, ref, onMounted } from 'vue'
import screenfull, { Screenfull } from 'screenfull'

export default defineComponent({
  name: 'ScreenFull',
  setup() {
    const { proxy } = getCurrentInstance()!,
        isFullscreen = ref(false)

    const handleClick = () => {
      /* 判断浏览器是否允许全屏 */
      if ( screenfull.isEnabled ) {
        screenfull.toggle()
        return
      }
      return proxy!.$message({ message: 'you browser can not work', type: 'warning' })
    }
    const change = () => {
      isFullscreen.value = (screenfull as Screenfull).isFullscreen
    }
    const init = () => {
      /* 判断浏览器是否允许全屏 */
      if ( screenfull.isEnabled ) {
        (screenfull as Screenfull).on('change', change)
      }
    }

    /* 组件被挂载事件 */
    onMounted(() => init())
    return {
      isFullscreen,
      handleClick
    }
  }
})
</script>

<style lang="scss" scoped>
.screenfull {
  cursor: pointer;
}
</style>
